<template>
  <div class="page">
    <van-sticky :offset-top="0">
      <van-tabs v-model:active="gameStore.gameData.active" line-width="0" line-height="0" @change="gameStore.changeTab">
        <van-tab
          v-for="(item, active) in gameStore.list"
          :key="item.name"
          :title-class="active !== gameStore.gameData.active ? 'title-class' : 'title-active-class'"
        >
          <template #title>
            <div
              class="tab-box all-center"
              :style="{
                opacity: active == gameStore.list.length - 1 && active !== gameStore.gameData.active ? 0.5 : 1,
              }"
            >
              <div class="title row-center all-center">
                <van-image
                  v-if="item.freeIcon"
                  class="free-icon"
                  :class="{
                    'free-active': active === gameStore.gameData.active,
                  }"
                  fit="contain"
                  :src="FreeImg"
                ></van-image>
                <component :is="item.activeIcon" v-if="active === gameStore.gameData.active" class="icon" />
                <div class="text">{{ item.name }}</div>
              </div>
              <van-image
                v-if="active === gameStore.gameData.active"
                class="active-bg"
                fit="contain"
                :src="ActiveBgImg"
              ></van-image>
            </div>
          </template>
        </van-tab>
      </van-tabs>
    </van-sticky>

    <div style="padding: 0 10px">
      <keep-alive><component :is="currentComponent" /></keep-alive>
    </div>
  </div>
</template>

<script setup lang="ts">
import FreeImg from '@/assets/images/game/free.png'
import { useGameStore } from '@/store/game'
import ActiveBgImg from '@/assets/images/game/tab_active.png'

const gameStore = useGameStore()
definePageMeta({
  layout: false,
  navProps: {
    title: '游戏',
  },
})

const currentComponent = computed(() => gameStore.list[gameStore.gameData.active].component)
</script>

<style scoped lang="scss">
:deep(.van-tabs__wrap) {
  margin-top: 20px;
  position: relative;
  box-sizing: border-box;
  height: 120px;
  background: rgba(255, 255, 255, 0.5);

  .van-tabs__nav--line {
    padding-right: 0;
    padding-left: 0;
  }

  .van-tabs__nav {
    position: relative;
    height: 100%;
    backdrop-filter: blur(25px);
    margin-top: 5px;
    padding-left: 20px;

    .title-class {
      overflow: hidden;
      box-sizing: border-box;
      width: 50px;
      &::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 25px;
        width: 100%;
        height: 5px;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(
          to top,
          rgba(187, 206, 238, 0.1),
          rgba(187, 206, 238, 0.2),
          rgba(255, 255, 255, 0.3),
          rgba(255, 255, 255, 0.5)
        );
      }
    }

    .title-active-class {
      width: 90px;
    }

    .tab-box {
      box-sizing: border-box;
      position: relative;
      width: 224px;
      height: 96px;

      .active-bg-icon {
        position: absolute;
        left: 0;
        bottom: -35px;
        color: var(--u-module-background-color);
        z-index: 1;
        width: 224px;
        height: 100px;
        stroke-width: 1px;
        filter: drop-shadow(0px -6px 12px rgba(187, 206, 238, 0.2));
      }

      .active-bg {
        position: absolute;
        left: 0px;
        top: 0;
        width: 224px;
        height: 96px;
        z-index: 1;
      }

      .title {
        padding-top: 10px;
        position: relative;
        z-index: 2;

        .free-icon {
          z-index: 9999;
          position: absolute;
          left: 50%;
          top: -45px;
          width: 94px;
          height: 48px;
          transform: translateX(-50%);
          color: #fe4421;
          stroke-width: 1px;
          stroke: white;
        }

        .free-active {
          top: -40px;
        }

        .icon {
          width: 32px;
          height: 32px;
          color: var(--u-primary-text-color);
          margin-right: 10px;
        }
        .text {
          color: var(--u-default-text-color);
          text-align: center;
          font-family: 'PingFang SC';
          font-size: 30px;
        }
      }
    }
  }
}
</style>
